<template>
  <div class="process1">
    <div class="finger">
      点击这里
      <img src="@/static/finger.svg" alt="">
    </div>
    <img src="@/static/yuanbao.png" class="baoxiangstyle roate" alt="" @click="open">
    <div class="awardword"> 回答正确奖励一个金元宝</div>

  </div>
</template>

<script setup>
import config from '../../config/config.js'
import { ref, onMounted } from 'vue'

import { useRouter } from 'vue-router';

import { useAuthStore } from '../../store/index';
const Store = useAuthStore();
const router = useRouter();
const baoxiangstyle = ref("baoxiang roate");
const rewarddetailstyle = ref("");
onMounted(() => {


})
const open = () => {
  router.push({
    path: "/game",
    query: {
      processnum: Store.topics[0].levelId
    }
  })
}
</script>

<style lang="scss" scoped>
.finger {
  position: absolute;
  display: flex;
  left: 50%;
  top: 50%;
  transform: translate(-20rem, -15rem);
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: red;
  font-weight: 900;

  img {
    transform: rotate(135deg);
  }
}

.process1 {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url('@/static/processback.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  .baoxiang {
    width: 30rem;
    height: 20rem;

    &.disappear {
      animation: fadeOut 0.5s forwards;
    }
  }

  .roate {
    animation: rotate 1s infinite;
  }


  .awardword {
    // position: absolute;

    margin: 0 auto;
    border: #875a44 solid 4px;
    font-size: 3rem;
    background-color: #fbe8a3;
  }
}

.roate {
  animation: rotate 1s infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(10deg);
  }

  50% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(-10deg);
  }

  100% {
    transform: rotate(0deg);
  }
}
</style>
